<template>
    <div class="article">
        <link rel="stylesheet" href="/static/js/editor.md/css/editormd.preview.min.css" />
        <!-- <remote-js src="/static/js/jquery-1.8.3.min.js"></remote-js> -->
        <remote-js src="/static/js/editor.md/editormd.min.js"></remote-js>
        <remote-js src="/static/js/editor.md/lib/marked.min.js"></remote-js>
        <remote-js src="/static/js/editor.md/lib/prettify.min.js"></remote-js>
        <el-row class="article-title"><h2>{{detial.articleTitle}}</h2></el-row>
        <!-- <el-row class="article-header">
            <div class="article-p-img"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606415238562&di=7efd57f62853f249501f0921ca97a7d5&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F213601f2xz7usscm2z1mjh.jpg"></div>
            <h2>我的第一篇博客</h2></el-row> -->
        <div class="article-main">
            <el-card shadow="hover" class="article-info animated fadeIn">
                <el-row class="content">
                    <div id="markdown-view">
                        <!-- <div style="display:block;" v-html="detial.content" v-highlight></div> -->
                        <textarea style="display:none;" v-html="replace(detial.articleContent)"></textarea>
                    </div>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import scriptjs from 'scriptjs'
// import zepto from 'Zepto'

let _this;
export default {
    name: 'Article',
    watch: {
        detial: function() {
            /*DOM还没更新*/
            _this.$nextTick(function(){
                /*现在数据已经渲染完毕*/
                //hljs.initHighlightingOnLoad();
                //清除延迟执行 
                let timer = setTimeout(()=>{   //设置延迟执行
                    var testView = editormd.markdownToHTML("markdown-view", {
                });
                clearTimeout(timer);  //清除延迟执行 
                },500);
            })  
        }
    },
    data() {
        return {
            detial: {
                articleTitle: '',
                articleContent: '',
                // content: '你好'
            },
             current_url:window.location.href
        }
    },
    components: {
        'remote-js': {
            render(createElement) {
                return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});
            },
            props: {
                src: { type: String, required: true}
            }
        }
    },
    computed:{
        compiledMarkdown(){
            return '';
        }
    },
    created(){
    },
    mounted(){
        _this = this
        // _this.detial = this.detial
        _this.createdLoca();
        _this.current_url = window.location.href
    },
    methods:{
        articleUp(data){
            _this.detial = data;
        },
        createdLoca(){
            // _this.syasJs()   // 执行数据渲染函数
        },
        syasJs(){
        (async () => {
            // await _this.fetchScript('/static/js/jquery-1.8.3.min.js')
            // await _this.fetchScript('/static/js/editor.md/editormd.min.js')
            // await _this.fetchScript('/static/js/editor.md/lib/marked.min.js')
            // await _this.fetchScript('/static/js/editor.md/lib/prettify.min.js')
            _this.$nextTick(function(){
                /*现在数据已经渲染完毕*/
                //hljs.initHighlightingOnLoad();
                var testView = editormd.markdownToHTML("markdown-view", {
                    htmlDecode: "style,script,iframe",  // you can filter tags decode
                    emoji: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    // flowChart: true,  // 默认不解析
                    sequenceDiagram: true,  // 默认不解析
                    codeFold: true,
                });
            })
        })()
        },
        replace:function(data){     // 处理数据中的转义'/' '\/' '/"' 等字符
            // var datas = data.replace(/\& #40;/g,'(').replace(/\& #41;/g,')')
            var datas = data.replaceAll("\\n","\n").replaceAll("\\/","/").replaceAll("\\\"","\"")
            // console.log("replace数据:",datas)
            return datas;
        }
    }
}
</script>

<style scoped>
.article {
    width: 100%;
    height: 100%;
}
.article-title h2{
    letter-spacing: 3px;  /* 字符间距 */
    margin: 0 0 20px 0;
    text-align: center;
    font-weight: 400;
    font-size: 26px;
}
.article-main {
    width: 70%;
    margin: auto;
}
.article-info {
    margin: 0 0 10px 0;
    width: 100%;
    color: #555;
    background-color: unset;
}
.article-p-img{
    position: relative;
}
.content{
  padding-top: 20px;
}
.editormd-html-preview{
    background-color: unset;
    box-sizing: border-box;
}
.markdown-body{
    text-align: justify;
    line-height: 2;
}
.editormd-html-preview{
    background-color: unset;
    box-sizing: border-box;
}
.markdown-body{
    text-align: justify;
    line-height: 2;
}
</style>